<template>
  <view>
    <uni-section :title="'查询日期'" type="line"></uni-section>
    <view class="example-body">
      <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
    </view>

    <uni-list :border="true">
      <uni-list-chat v-for="(item,i) in result" :key="i" :avatar-circle="true" avatar="/static/images/zhifu.jpg"
        :title="`支付金额:${item.partyDues}`" :note="`订单号:${item.partyDuesId}`" :time="item.payingTime" :clickable="true">
      </uni-list-chat>
    </uni-list>
  </view>
</template>

<script>
  import {
    getmyDues
  } from "@/api/team/team"
  export default {
    data() {
      return {
        range: [],
        result: []
      };
    },
    onLoad(){
      this.getCurrentMonthFirst();
    },
    methods: {
      getCurrentMonthFirst() {
        var date = new Date();
        date.setDate(1);
        this.range[0] = date.toISOString().slice(0, 10)
        this.range[1] = new Date().toISOString().slice(0, 10)
        console.log(this.range[0], this.range[1]);
        this.getmoney()
      },
      getmoney(){
        // console.log(this.range)
        getmyDues(this.range[0], this.range[1]).then(response => {
          if (response.data.length == 0) {
            uni.showToast({
              title: '无记录',
              icon: 'none',
              duration: 2000
            })
            this.result = []
            return
          }
          this.result = response.data
        })
      }
    },
    watch: {
      range() {
        this.getmoney()
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ff2121;
    background: url('../../../static/images/dj4.png') no-repeat center;
    background-size: 450px;
  }

  .search-box {
    // 设置定位效果为吸顶
    position: sticky;
    // 吸顶的位置
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }

  .chat-custom-right {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }

  .chat-custom-text {
    font-size: 12px;
    color: #999;
  }
</style>
